<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="description" content="">
		<meta name="author" content="Mosaddek">
		<meta name="keyword" content="FlatLab, Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina">
		<link rel="shortcut icon" href="img/favicon.html">

		<title>车辆列表</title>

		<!-- Bootstrap core CSS -->
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<link href="css/bootstrap-reset.css" rel="stylesheet">
		<!--external css-->
		<link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="assets/gritter/css/jquery.gritter.css" />
		<!-- Custom styles for this template -->
		<link href="css/style.css" rel="stylesheet">
		<link href="css/style-responsive.css" rel="stylesheet" />
		<!-- HTML5 shim and Respond.js IE8 support of HTML5 tooltipss and media queries -->
		<!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
      <script src="js/respond.min.js"></script>
    <![endif]-->
	</head>

	<body>

		<!--main content start-->
		<section id="main-content">
			<section class="wrapper">
				<!-- page start-->
				<div class="row">
					<div class="col-lg-12">
						<section class="panel">
							<header class="panel-heading">
								车辆列表
							</header>
							<div class="panel-body bio-graph-info">
								<form role="form" class="form-horizontal">
									<div class="form-group">
										<label class="col-lg-1 control-label" for="carNumber">车牌号</label>
										<div class="col-lg-2">
											<input type="text" class="form-control" id="carNumber" />
											<!--  -->
										</div>
										<label class="col-lg-1 control-label" for="style">类型</label>
										<div class="col-lg-2">
											<select name="sample_1_length" aria-controls="sample_1" class="form-control" id="style">
												<option value="全部" selected="selected">全部</option>
												<option value="小汽车">小汽车</option>
												<option value="卡车">卡车</option>
												<option value="毛驴车">毛驴车</option>
											</select>
										</div>
										<label class="col-lg-1 control-label" for="carOwner">车主</label>
										<div class="col-lg-2">
											<input type="text" class="form-control" id="carOwner" />
											<!--  -->
										</div>
									</div>
									<div class="form-group">
										<label class="col-lg-1 control-label" for="seating">座位数</label>
										<div class="col-lg-2">
											<input type="text" class="form-control" id="seating" />
											<!--  -->
										</div>
										<label class="col-lg-1 control-label" for="color">颜色</label>
										<div class="col-lg-2">
											<input type="text" class="form-control" id="color" />
											<!--  -->
										</div>

										<div class="col-lg-5">
											<button class="btn btn-shadow btn-primary" onclick="o();return false;">查询</button>
										</div>
									</div>
								</form>
							</div>
							<table class="table table-striped border-top" id="sample_1">
								<thead>
									<tr>
										<th style="width:8px;"><input type="checkbox" class="group-checkable" data-set="#sample_1 .checkboxes" /></th>
										<th class="hidden-phone">车牌号</th>
										<th class="hidden-phone">颜色</th>
										<th class="hidden-phone">类型</th>
										<th class="hidden-phone">品牌</th>
										<th class="hidden-phone">所属车主</th>
										<th class="hidden-phone">座位号</th>
										<th class="hidden-phone">登记时间</th>
										<th class="hidden-phone">操作</th>
									</tr>
								</thead>
								<tbody id="content">

									<!--填充内容-->
								</tbody>
							</table>
						</section>
					</div>
				</div>
				<!-- page end-->

				<div class="modal fade" id="myModalSelect" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                      </button>
								<h4 class="modal-title" id="myModalLabel">
                       删除
                      </h4>
							</div>
							<div class="modal-body">
								是否删除这些数据？
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-default" data-dismiss="modal">关闭
                      </button>
								<button type="button" class="btn btn-primary">
                        确定删除
                      </button>
							</div>
						</div>
						<!-- /.modal-content -->
					</div>
					<!-- /.modal -->
				</div>
			</section>
		</section>
		<!--main content end-->
		</section>

		<!--  js placed at the end of the document so the pages load faster
   <script src="js/jquery.js"></script>
   <script src="js/bootstrap.min.js"></script>
   <script src="js/jquery.scrollTo.min.js"></script>
   <script src="js/jquery.nicescroll.js" type="text/javascript"></script>
   <script type="text/javascript" src="assets/gritter/js/jquery.gritter.js"></script>
   
   
   common script for all pages
   <script src="js/common-scripts.js"></script>
   
   script for this page only
   <script src="js/gritter.js" type="text/javascript"></script> -->

		<!-- js placed at the end of the document so the pages load faster -->
		<script src="js/jquery.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="js/jquery.scrollTo.min.js"></script>
		<script src="js/jquery.nicescroll.js" type="text/javascript"></script>
		<script type="text/javascript" src="assets/data-tables/jquery.dataTables.js"></script>
		<script type="text/javascript" src="assets/data-tables/DT_bootstrap.js"></script>

		<!--common script for all pages-->
		<script src="js/common-scripts.js"></script>
		<!--script for this page only-->
		<script src="js/dynamic-table.js"></script>
		<script src="js/Underscore.js"></script>
		<!--请求数据 从这里开始-->
		<script src="js/json2.js"></script>
		<script type="text/javascript">
			function o() {
				var carNumber = $('#carNumber').val(),
					style = $('#style').val(),
					carOwner = $('#carOwner').val(),
					seating = $('#seating').val(),
					color = $('#color').val();
				var datalist = {
					'id': carNumber,
					'car_type': style,
					'car_user_id': carOwner,
					'seat_count': seating,
					'car_color': color,
					'start': 0,
					'count': 10
				};
				var dd = JSON.stringify(datalist);
				$.ajax({
					url: 'car_querys.action', // 请求的地址
					type: 'POST',
					dataType: 'json',
					data: "data=" + dd,
					
					success: function(datas) {
						//alert(datas.data[0].id);
						if(datas.code == 0){
							alert(datas.data);
							console.log('请求出错');
							return false;
						}
						//取出datas中包含的数组data并遍历取值
						var arr = datas.data;
						sessionStorage.setItem("carList", JSON.stringify(arr));
						var t = _.template($("#t1").html());
						//$('#content').html(t({"data":datas.data}));
						$("#content").html(t(arr));
					}
				})
			}

           //删除对应用户
			function del() {
				var r=confirm("确定要从数据库中删除该记录？")			
					if(r){
						var data = JSON.parse(sessionStorage.getItem("carList"));
						var dataList = [];
						var j = 0;
						$("input:checkbox[name='box']:checked").each(function(i){				 		       
							   var i = $(this).val();							  
							   var id = data[i].id;
							   var temp = {"id":id};						   							   			       
							   dataList[j] = temp;
							   j=j+1;				       
						})
						var dd = JSON.stringify(dataList);
						//alert(dd);
					
						$.ajax({
							url: 'car_delete.action',
							type: 'POST',
							dataType: 'json',
							data: "data=" + dd,

							success: function(data) {
								alert(data.data);
								console.log('success');
							},

							error: function(data) {
								alert(data.data);
							}

						})  
						
					} 
				
			} 
		</script>
		<script type="text/template" id="t1">
			<% _.each(obj, function (index,item) { %>
			<tr class="odd gradeX">
				<td><input type="checkbox" class="checkboxes" value="<%=item %>" name="box"/></td>
				<td class="hidden-phone">
					<%=index.id %>
				</td>
				<td class="hidden-phone">
					<%=index.car_color %>
				</td>
				<td class="hidden-phone">
					<%=index.car_type %>
				</td>
				<td class="hidden-phone">
					<%=index.brand %>
				</td>
				<td class="hidden-phone">
					<%=index.user.name %>
				</td>
				<td class="hidden-phone">
					<%=index.seat_count %>
				</td>
				<td class="hidden-phone">
					<%=index.create_time %>
				</td>
				<td class="hidden-phone">
					<button class="btn btn-primary btn-xs" ><a href="carMessageUpdate.html"><i class="icon-pencil"></i></a></button>
					<button class="btn btn-danger btn-xs" onclick="del();return false;"><i class="icon-trash "></i></button></td>
			</tr>
			<% }); %>

		</script>
	</body>

</html>